<template>
  <el-row>
    <div class="infinite-list-wrapper" style="overflow:auto">
      <ul
        class="list"
        v-infinite-scroll="loadmore"
        :infinite-scroll-disabled="disabled"
      >
        <el-col :span="6" v-for="(item,i) in newList" :key="i" class>
          <router-link :to="{name:'gooddetail',params:{goodId:item._id}}">
            <el-card class="box-card list-item">
              <img :src="item.img" alt />
              <p>{{item.name}}</p>
              <p>￥:{{item.price}}元</p>
            </el-card>
          </router-link>
        </el-col>
        <p v-if="loading">加载中...</p>
        <p v-if="noMore">没有更多了</p>
      </ul>
    </div>
  </el-row>
</template>

<script>
export default {
  props: ["typeobj", "goods"], //父传子
  data() {
    return {
      list: [],
      count: 6,
      loading: false,
    };
  },
  computed: {
    noMore() {
      return this.count >= this.list.length;
    },
    disabled() {
      return this.loading || this.noMore;
    },
    newList() {
      return this.list.slice(0, this.count);
    },
  },
  methods: {
    loadmore() {
      this.loading = true; //表示正在加载
      setTimeout(() => {
        this.count += 3;
        this.loading = false;
      }, 1200);
    },
  },
  mounted() {
    this.list = this.goods.filter(
      (item) => item.type.value == this.typeobj.value
    );
  },
};
</script>

<style lang="scss" scoped>
.list-item {
  margin: 10px 5px;
  img {
    width: 100%;
    height: 240px;
  }
  p {
    width: 100%;
    height: 60px;
    line-height: 20px;
    margin-top: 10px;
    color: darkorange;
  }
}
.ptips {
  width: 100%;
  text-align: center;
}
</style>